<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Client Side Pagination in DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../extend.js"></script>
    <script>
		        $(document).ready(function(){
            showMask('正在载入数据');
            setData();
            hideMask();
		});
        var dataListCache = [];
		function getData(){
			var rows = [];
			for(var i=1; i<=800; i++){
				var amount = Math.floor(Math.random()*1000);
				var price = Math.floor(Math.random()*1000);
				rows.push({
					inv: 'Inv No '+i,
					date: $.fn.datebox.defaults.formatter(new Date()),
					name: 'Name '+i,
					amount: amount,
					price: price,
					cost: amount*price,
					note: 'Note '+i
				});
			}
			return rows;
		}
		        function setData(){
            $.ajaxSettings.async=false;
            dataListCache = dataFetcher('../../../api/department/list');
            dataListCache.push(dataListCache[0]);
            dataListCache.push(dataListCache[0]);
            dataListCache.push(dataListCache[0]);
            dataListCache.push(dataListCache[0]);
            dataListCache.push(dataListCache[0]);
            dataListCache.push(dataListCache[0]);
            $.ajaxSettings.async=true;
            $('#departmentList').datagrid({data: dataListCache});
            $('#departmentList').datagrid('clientPaging'); 
        }

                function calSize(){
            var height=window.parent.document.getElementById("mainFrame").clientHeight;
            var width=window.parent.document.getElementById("mainFrame").clientWidth;
            window.parent.document.getElementById(appId).height = height-35;
            $("#departmentList").datagrid({height:height-80,width:width-20});
            $("#toolbar").panel({width:width-20});
            $("#editZone").panel({height:height-135});
        }
	</script>
</head>
<body>
	<h2>Client Side Pagination in DataGrid</h2>
	<p>This sample shows how to implement client side pagination in DataGrid.</p>
	<div style="margin:20px 0;"></div>
	
    <table id="departmentList" class="easyui-datagrid"
        data-options="singleSelect:true,pagination:true, rownumbers:true,">
        <thead>
            <tr>
                <th data-options="field:'AutoId',hidden:true"></th>
                <th data-options="field:'Flag',hidden:true"></th>
                <th data-options="field:'Code',width:120,align:'right'">部门代号</th>
                <th data-options="field:'Name',width:120,align:'right'">部门名称</th>
                <th data-options="field:'ParentId',width:120,align:'right',formatter:function(value,row,index){var result = valToName(dataListCache,value);if(result!=0){return result;}},">上级部门</th>
                <th data-options="field:'Note',width:300,align:'right'">备注</th>
            </tr>
        </thead>
    </table>
	
</body>
</html>